<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" import="java.util.*"%>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="dao.BookDAO" %>
<%@ page import="pojo.Book" %>
<%@ page import="pojo.Discuss" %>
<%@ page import="dao.DiscussDAO" %>
<%@ page import="pojo.Review" %>
<%@ page import="dao.StudentDAO" %>
<!DOCTYPE html>

<html>

<head>
    <title>作品交流</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" type="text/css" href="ReadingOcean/resources/forum/css/forumDetail.css">
    <link rel="stylesheet" href="ReadingOcean/resources/books/css/x0popup.min.css">
</head>

<body class="forum">

<style>
    .main-category a{
        color: black;
        text-decoration: none;
    }
    .main-category a.active{
        color: #fff;
        text-decoration: none;
    }
</style>

<%@include file="common.jsp" %>

<div class="main">
    <!-- main-head 包括书籍主题介绍，发表按钮组，筛选帖子类型组-->
    <div class="main-head">
        <!-- main-head-topicMes 主题介绍-->
        <%
            BookDAO bookDAO = new BookDAO();
            Book book = bookDAO.getBookById(Integer.parseInt(request.getParameter("bk_id")));
            if(book!=null)
            {
        %>
        <div class="main-head-topicMes">
            <h2><%=book.getName()%></h2>
            <img src="<%=book.getCover()%>" alt="cover">
            <ul>
                <li>作者: <%=book.getAuthor()%></li>
                <li>出版社: <%=book.getPublisher()%></li>
                <li>适读阶段: <%=book.getReader()%></li>
                <li>
                    <a href="detail.jsp?id=<%=book.getId()%>">书籍详情</a>
                </li>
            </ul>
        </div>
        <%
            }
        %>
        <!-- div.main-head-addBtns 发表按钮组-->
        <div class="main-head-addBtns">
            <button type="button"><img src="ReadingOcean/forum/images/comment.png" alt="add">+ 短评</button>
            <button type="button"><img src="ReadingOcean/forum/images/heart.png" alt="add">+ 读后感</button>
            <button type="button"><img src="ReadingOcean/forum/images/paint.png" alt="add">+ 绘画</button>
            <button type="button"><img src="ReadingOcean/forum/images/thought.png" alt="add">+ 思维导图</button>
            <button type="button"><img src="ReadingOcean/forum/images/note.png" alt="add">+ 读书笔记</button>
        </div>

    </div>

    <!-- main-category 分类筛选帖子按钮组-->
    <div class="main-category">
        <button class="all"><a href="?bk_id=${bk_id}&category=all&start=0&sort=${sort}">全部</a></button>
        <button class="forum_post_pinglun"><a href="?bk_id=${bk_id}&category=comment&start=0&sort=${sort}">短评</a></button>
        <button class="forum_post_duhougan"><a href="?bk_id=${bk_id}&category=feel&start=0&sort=${sort}">读后感</a></button>
        <button class="forum_post_huihua"><a href="?bk_id=${bk_id}&category=paint&start=0&sort=${sort}">绘画</a></button>
        <button class="forum_post_siwei"><a href="?bk_id=${bk_id}&category=siwei&start=0&sort=${sort}">思维导图</a></button>
        <button class="forum_post_biji"><a href="?bk_id=${bk_id}&category=note&start=0&sort=${sort}">读书笔记</a></button>
    </div>

<%--    排序功能先不做--%>
    <div class="post-sort">
        <span id="rank" style="display: none">timedown</span>
        <span>请选择排序方式</span>
<%--        <a id="myself" href="?bk_id=${bk_id}&category=${reviewCategory}&start=0&sort=myself">看自己</a>--%>
        <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=0">最近以来</a>
        <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=0&sort=asc">更早以前</a>
        <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=0&sort=like">按点赞数</a>
        <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=0&sort=discuss">按评论数</a>
    </div>

    <!-- main-posts 帖子-->
    <div class="main-posts">
        <%
            List<Review> reviews = (List<Review>) request.getAttribute("reviews");
            for (Review review:reviews) {
        %>
            <div class="post">
                <div class="post-header">
                    <span class="type <%=review.getType()%>" id="thisSpan"><%=review.getType2chn()%></span>
                    <span class="title"><%=review.getTitle()%></span>
                    <span class="time"><%=review.getTime()%></span>
                    <span class="author">
                            <a href="" target="_blank">
                                    <%=new StudentDAO().getNameById(review.getSt_id())%>
                            </a>
                            <img class="add-friend" style="width: 20px;vertical-align: text-bottom" src="ReadingOcean/resources/user/images/add-friend-1.png">
                        </span>
                </div>
                <div class="post-content">
                    <%
                        if (review.getImg() != null){
                    %>
                        <img title="点击查看大图" class="pic" alt="pic" src="<%=review.getImg()%>">
                    <%
                        }
                    %>
                    <p><%=review.getContent()%></p>
                </div>

<%--                子评论--%>
                <%
                    if (review.getDiscuss() != 0){
                        List<Discuss> discusses = new DiscussDAO().list(review.getId());
                %>
                <div class="comments-list" id="comments_${review.id}" style="display: block">
                    <ul>
                        <%
                            for (Discuss discuss:discusses) {
                        %>
                        <li class="comments-item">
                            <div class="comments-content"><span class="commentName"><%=new StudentDAO().getNameById(discuss.getSt_id())%></span>
                                : <%=discuss.getContent()%>
                                <span style="display: none" class="discussId"><%=discuss.getId()%></span>
<%--                                <button class="reply-comments" style="display: none;">回复</button>--%>
                            </div>
                        </li>
                        <%
                            }
                        %>
                    </ul>
                </div>
                <%
                    }
                %>
                <div class="post-footer">
                    <!-- 保存帖子id供js点赞功能使用 -->
                    <span style="display: none" class="postId"><%=review.getId()%></span>
                    <button class="open" type="button">展开</button>
                    <button class="praise" type="button" id="praise_<%=review.getId()%>"><img alt="praise" src="ReadingOcean/resources/forum/images/praise.png"><span><%=review.getLike()%></span></button>

<%--                    diy点赞--%>
                    <form action="addLike" method="post">
                        <input type="hidden" name="like" value="<%=review.getId()%>">
                        <input type="hidden" name="url" id="url_<%=review.getId()%>">
                        <input type="submit" style="display: none"  id="sub_like_<%=review.getId()%>">
                    </form>
                    <script>
                        $("#praise_<%=review.getId()%>").click(function () {
                            $("#url_<%=review.getId()%>").prop("value", window.location.href);
                            <%--alert($("#url_${review.id}").prop("value"));--%>
                            $("#sub_like_<%=review.getId()%>").trigger("click");
                        })
                    </script>

                </div>
                <div class="post-footer">
                    <span style="display: none" class="postId"><%=review.getId()%></span>
                    <button type='button' class="commentForumPost">我要评论</button>
<%--                    <button type='button' class="checkForumPost">查看评论(<%=review.getDiscuss()%>)</button>--%>
<%--                    <input type="hidden" value="<%=review.getDiscuss()%>">--%>
                </div>
            </div>
        <%
            }
        %>
    </div>
</div>

<!-- popup 遮盖层加表单-->

<div class="popup">
    <form action="addReview" method="post" enctype="multipart/form-data">
        <select class="type" name="postType">
            <option value="forum_post_duhougan">感悟</option>
            <option value="forum_post_pinglun">评价</option>
            <option value="forum_post_huihua">绘画</option>
        </select>
        <span class="typeTip">感悟</span>
        <button class="close" type="button">╳</button>

        <input class="title" type="text" name="title" placeholder="请填写标题" required="required" maxlength="20">
        <textarea class="content" name="content" required="required" maxlength="2000"></textarea>

        <input id="imgFile" class="file" type="file" name="imgFile"><span class="tip"> (可选) </span>
        <input type="checkbox" name="agree" id="agree" checked="checked" style="display: none">

        <button id="btn_rw_pub" class="submit" type="submit">发表</button>

        <%--        diy--%>
        <input type="hidden" name="st_id" value="<%=session.getAttribute("st_id")%>">
        <input type="hidden" name="st_name" value="<%=session.getAttribute("st_name")%>">
        <input type="hidden" name="bk_id" value="${bk_id}">
        <input type="hidden" name="time" value="<%
            Date date = new Date();
            SimpleDateFormat df = new SimpleDateFormat("yyy-MM--dd HH:mm:ss");
            String s = df.format(date);
            out.write(s);
        %>">

        <%--        在myForumDetail.js中随着ajax发帖设置value--%>
        <input type="hidden" name="type" id="rw_type">

        <%--        diy的url用于评论后返回当前页面，后面统一的js写了当发现按钮点击事件自动赋值--%>
        <input type="hidden" name="url" class="url">
    </form>
</div>

<!-- 二级评论 -->
<div class="comment-popup">
    <!-- 评论窗口 -->
    <form action="addDiscuss" method="post">
        <span class="comment-advise">评论</span>
        <button class="comment-close" type="button">╳</button>

        <textarea name="content" class="comment-userContent" required="required" maxlength="250" placeholder="请发表你的评论..."></textarea>
        <button id="btn_dc_pub" class="comment-submitBtn" type="button">发表</button>

        <%--diy--%>
        <input type="hidden" name="st_id" value="<%=session.getAttribute("st_id")%>">
        <input type="hidden" name="time" value="<%
            date = new Date();
            df = new SimpleDateFormat("yyy-MM--dd HH:mm:ss");
            s = df.format(date);
            out.write(s);
        %>">
<%--        rw_id获取的value在myForumDetail.js中赋值--%>
        <input type="hidden" name="rw_id" id="rw_id">
        <input type="hidden" name="url" class="url">

        <button style="display: none" type="submit" id="sub_discuss">真实的提交按钮才不会显示出来！~</button>

        <script>
            $(document).ready(function () {
                $("#btn_dc_pub").click(function () {
                    // $(".url").prop("value", window.location.href); //后面统一写了，不再需要独立
                    // alert($(".url").prop("value"));
                    $("#sub_discuss").trigger("click");
                })
            })
        </script>
    </form>
</div>

<!-- inform 提示框 -->
<div class="inform"></div>

<div class="mypager">
    <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=0&sort=${sort}">首  页</a>
    <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=${pre}&sort=${sort}">上一页</a>
    <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=${next}&sort=${sort}">下一页</a>
    <a href="?bk_id=${bk_id}&category=${reviewCategory}&start=${last}&sort=${sort}">末  页</a>
</div>

<script src="ReadingOcean/resources/books/js/x0popup.min.js"></script>
<%--<script src="ReadingOcean/resources/common/js/ajaxfileupload.js"></script>--%>
<%--<script src="ReadingOcean/resources/forum/js/forumDetail.js?version=20170602"></script>--%>
<%--尝试改写js来用于自己的后台，待开发--%>
<script src="ReadingOcean/resources/forum/js/myForumDetail.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $(".url").prop("value", window.location.href);  //用来post后通过hidden的inp传入后台来redirect回来
            // alert($(".url").prop("value"));
        })
    });
    window.onload = function () {
        var loc = window.location.href;

        var cat = loc.substring(loc.indexOf("category")+"category=".length, loc.lastIndexOf("&start"));
        switch (cat) {
            case "comment":
                $('.main-category a').eq(1).addClass('active');
                $('.main-category a').eq(1).parent().addClass('current');
                break;
            case "feel":
                $('.main-category a').eq(2).addClass('active');
                $('.main-category a').eq(2).parent().addClass('current');
                break;
            case "paint":
                $('.main-category a').eq(3).addClass('active');
                $('.main-category a').eq(3).parent().addClass('current');
                break;
            case "siwei":
                $('.main-category a').eq(4).addClass('active');
                $('.main-category a').eq(4).parent().addClass('current');
                break;
            case "note":
                $('.main-category a').eq(5).addClass('active');
                $('.main-category a').eq(5).parent().addClass('current');
                break;
            default:
                $('.main-category a').eq(0).addClass('active');
                $('.main-category a').eq(0).parent().addClass('current');
                break;
        }

        var sort = loc.substring(loc.indexOf("sort")+"sort=".length);
        switch (sort) {
            case "asc":
                $('.post-sort a').eq(1).addClass('current');
                break;
            case "like":
                $('.post-sort a').eq(2).addClass('current');
                break;
            case "discuss":
                $('.post-sort a').eq(3).addClass('current');
                break;
            default:
                $('.post-sort a').eq(0).addClass('current');
                break;
        }

    }
</script>
</body>

</html>